<template>
  <view class="goods1-wrap">
    <view class="goods1-coupon-page">
      <view class="image"><image class="img" src="/static/goods_list/face.jpg"></image></view>
      <view class="content">
        <view class="title">澳天力针叶樱桃胶原蛋白粉水解粉肽精华粉含维C维E男女美容养颜粉</view>
        <view class="num s-row">
          <text class="tmprice">天猫价 ¥55.00</text>
          <text class="volume">已售88件</text>
        </view>
        <view class="money s-row">
          <text class="coupon-price">
            券后价
            <text>¥25.00</text>
          </text>
          <text class="quan">
            <i></i>
            30元券
            <i></i>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style>
.goods1-wrap {
    display: inline-block;
    padding: 20rpx 0;
}

.goods1-coupon-page {
  padding: 20rpx;
}

.goods1-coupon-page .image {
  float: left;
  width: 40%;
}

.goods1-coupon-page .image image {
  width: 240rpx;
  height: 240rpx;
  border-radius: 6rpx;
}

.goods1-coupon-page .content {
  float: right;
  width: 60%;
}

.goods1-coupon-page .content .title {
  color: #333;
  font-weight: 400;
  font-size: 32rpx;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 84rpx;
  margin-bottom: 40rpx;
  overflow: hidden;
}

.goods1-coupon-page .content .num {
  color: #aaa;
  line-height: 40rpx;
  font-size: 26rpx;
  padding-top: 26rpx;
}

.goods1-coupon-page .content .num .tmprice {
  padding-right: 20rpx;
  margin-right: 20rpx;
  position: relative;
  z-index: 1;
  zoom: 1;
  display: inline-block;
}

.goods1-coupon-page .content .num .volume {
  float: right;
}

.goods1-coupon-page .content .money {
  height: 48rpx;
  font-size: 36rpx;
  margin-top: 10rpx;
}

.goods1-coupon-page .content .money .quan {
  padding: 0;
  position: relative;
  z-index: 1;
  zoom: 1;
  top: 0;
  overflow: hidden;
  float: right;
}

.goods1-coupon-page .content .money .quan {
  background: -moz-linear-gradient(left, #ff5e5e 0, #ff927c 100%);
  background: -webkit-gradient(linear, left top, left right, color-stop(0, #ff5e5e), color-stop(100%, #ff927c));
  background: -webkit-linear-gradient(left, #ff5e5e 0, #ff927c 100%);
  background: -o-linear-gradient(left, #ff5e5e 0, #ff927c 100%);
  background: -ms-linear-gradient(left, #ff5e5e 0, #ff927c 100%);
  background: linear-gradient(to left, #ff5e5e 0, #ff927c 100%);
  position: relative;
  z-index: 1;
  zoom: 1;
  font-style: normal;
  display: block;
  border-radius: 6rpx;
  -moz-border-radius: 6rpx;
  -webkit-border-radius: 6rpx;
  -o-border-radius: 6rpx;
  -ms-border-radius: 6rpx;
  font-size: 0.785rem;
  min-width: 3rem;
  text-align: center;
  padding: 2rpx 20rpx;
  color: #fff;
}

.goods1-coupon-page .content .money .quan:before {
  position: absolute;
  z-index: 1;
  zoom: 1;
  top: 50%;
  margin-top: -6rpx;
  background: #fff;
  display: block;
  width: 10rpx;
  height: 10rpx;
  content: '';
  border-radius: 20rpx;
  border: 2rpx solid #fff;
  left: auto;
  right: -8rpx;
}

.goods1-coupon-page .content .money .quan:after {
  position: absolute;
  z-index: 1;
  zoom: 1;
  top: 50%;
  margin-top: -3px;
  background: #fff;
  display: block;
  width: 10rpx;
  height: 10rpx;
  content: '';
  border-radius: 20rpx;
  border: 2rpx solid #fff;
  left: -8rpx;
}

.goods1-coupon-page .content .money .coupon-price {
  color: #fc4d52;
  font-size: 24rpx;
}

.goods1-coupon-page .content .money .coupon-price text {
  font-size: 32rpx;
  padding-left: 10rpx;
}
</style>
